<template>
  <div>
    <el-dialog title="审前调查" fullscreen custom-class="ledger audited" :visible.sync="viewBox" :close-on-click-modal="!viewBox"
               :append-to-body="true" :before-close="resetForm" width="1200px" top="5vh">
      <div class="dialogHead">
        <span class="tableTitle">审前调查-SJ-XM20220008-远望发展固定资产投资项目专项审计</span>
        <div class="tableWork">
          <div class="workbtn">
            <div class="workflow_button">附件(0) 关联文档(0)</div>
            <div class="workBox">
              <div class="arrow1"></div>
              <div class="arrow2"></div>
              <div class="item_content">
                <el-empty description="暂无数据" :image-size="50"></el-empty>
              </div>
            </div>
          </div>
          <div class="workflow_button" @click="pocessDialog = true">流程</div>
        </div>
      </div>
      <el-descriptions title="" :labelStyle="{'width': '90px'}">
        <el-descriptions-item label="调查单位" :span="2">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="编制人">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :labelStyle="{'width': '90px'}">
        <el-descriptions-item label="被审计对象" :span="2">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="编制日期">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <div class="title">基本信息</div>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="项目编号">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="审计项目名称" :span="2">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="项目状态">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="审计类型">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="审计子类型">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="项目进度">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="审计区间" :span="2">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <div class="title">计划分工</div>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="调查负责人">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="调查小组成员">{{ form.renterName }}</el-descriptions-item>
        <el-descriptions-item label="调查时间">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="申请调查分工" :span="3">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <div class="title">调查内容</div>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="基本情况" :span="3">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="经济环境（政策因素）" :span="3">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="行业现状和发展趋势" :span="3">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="审计程序与方法" :span="3">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="其他资料" :span="3">{{ form.renterName }}</el-descriptions-item>
      </el-descriptions>
      <div class="title">历年审计</div>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="审计报告"><el-button size="mini" round style="min-width: 150px;">详情</el-button></el-descriptions-item>
        <el-descriptions-item label="工作底稿"><el-button size="mini" round style="min-width: 150px;">详情</el-button></el-descriptions-item>
      </el-descriptions>
      <div class="title">审批意见</div>
      <el-descriptions title="" :labelStyle="{'width': '130px'}">
        <el-descriptions-item label="审批意见" :span="3">
          <el-input
            type="textarea"
            :autosize="{minRows: 2}"
            v-model="form.textarea">
          </el-input>
        </el-descriptions-item>
      </el-descriptions>
      <div class="li_title">
        <div class="replay">发起人附言</div>
        <div class="addReply" @click="addReply = true">新增附言</div>
      </div>
      <div class="replyCon" v-if="addReply">
        <el-input
          type="textarea"
          :autosize="{minRows: 5}"
          placeholder="2000字以内"
          v-model="form.textarea">
        </el-input>
        <div class="bar">
          <el-button type="primary" size="mini" round>提交</el-button>
          <el-button size="mini" round>取消</el-button>
        </div>
      </div>
      <div class="li_title li_title1">
        <div class="replay deal" :class="{'dealHover': current === 1}" @click="current = 1">处理人意见区 （共0条，0个赞）</div>
        <div class="replay deal" :class="{'dealHover': current === 2}" @click="current = 2">与我相关 （共0条）</div>
      </div>
      <div v-if="current === 1">1</div>
      <div v-if="current === 2">2</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm" size="small" icon="el-icon-close">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看流程图" :visible.sync="pocessDialog" :close-on-click-modal="!pocessDialog" :append-to-body="true" width="900px" top="5vh">
      123
    </el-dialog>
    <el-dialog title="审计报告书查询 " :visible.sync="baogaoDialog" :close-on-click-modal="!baogaoDialog" :append-to-body="true" width="900px" top="5vh">
      <div class="baogaoHead">
        <div class="baogaoTitle">审计报告书查询<span>(0条)</span></div>
        <div>数据源 ： SJ502审计报告    查询日期 ： 2023-11-14 05:51:40</div>
        <div>筛选条件 ： ( 被审计单位 包含 空值 )</div>
      </div>
      <el-table header-row-class-name="container-table-header" :data="baogaoData" size="small" style="width: 100%;margin-bottom: 20px;" border stripe>
        <el-table-column prop="dealSerial" label="项目编号">
        </el-table-column>
        <el-table-column prop="dealSerial" label="审计项目名称">
        </el-table-column>
        <el-table-column prop="dealSerial" label="被审计单位">
        </el-table-column>
        <el-table-column prop="dealSerial" label="主审单位">
        </el-table-column>
        <el-table-column prop="dealSerial" label="审计文书编号">
        </el-table-column>
        <el-table-column prop="dealSerial" label="文书进度状态值">
        </el-table-column>
      </el-table>
      <div class="container-page">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </el-dialog>
    <el-dialog title="审计报告书查询 " :visible.sync="diaoDialog" :close-on-click-modal="!digaoDialog" :append-to-body="true" width="900px" top="5vh">
      <div class="baogaoHead">
        <div class="baogaoTitle">审计工作底稿查询<span>(0条)</span></div>
        <div>数据源 ： SJ401疑点发现底稿    查询日期 ： 2023-11-14 06:04:53</div>
        <div>筛选条件 ： ( 被审计单位 包含 空值 )</div>
      </div>
      <el-table header-row-class-name="container-table-header" :data="digaoData" size="small" style="width: 100%;margin-bottom: 20px;" border stripe>
        <el-table-column prop="dealSerial" label="工作底稿发布">
        </el-table-column>
        <el-table-column prop="dealSerial" label="审计项目名称">
        </el-table-column>
        <el-table-column prop="dealSerial" label="被审计单位">
        </el-table-column>
        <el-table-column prop="dealSerial" label="审计组组长">
        </el-table-column>
        <el-table-column prop="dealSerial" label="制定复核人">
        </el-table-column>
      </el-table>
      <div class="container-page">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formDocument from "@/components/form/document";
export default {
  name: 'chose-ledger',
  components: { formDocument },
  props: {
    auditedDialog: Boolean,
    guideId: {
      type: String,
      default: ''
    }
  },
  computed: {
    viewBox() {
      return this.auditedDialog
    }
  },
  data() {
    return {
      form: {},
      addReply: false,
      current: 1,
      pocessDialog: false,
      baogaoDialog: false,
      baogaoData: [],
      digaoDialog: false,
      digaoData: [],
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      diaoDialog: false
    }
  },
  methods: {
    resetForm() {
      this.$emit('auditedClose')
      this.form = {}
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page, this.query);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page, this.query);
    },
  }
}
</script>

<style>
.li_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FCF6EC;
  border-top: none !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-right: 20px;
  margin-bottom: 15px;
}
.li_title .replay {
  background: url("~@/assets/img/2.png") center center no-repeat !important;
  background-size: 100% 100%;
  color: #F7A327;
  padding: 0 32px 0 20px;
  display: inline-block;
  line-height: 40px;
  font-weight: bold;
}
.li_title .addReply {
  color: blue;
}
.li_title1 {
  justify-content: inherit;
  background: #E8F2FD;
}
.li_title1 .deal {
  background-image: none!important;
  color: #999999!important;
}
.li_title1 .dealHover {
  background-image: url("~@/assets/img/1.png")!important;
  background-size: 100% 100%!important;
  color: #1F85EC!important;
}
.replyCon {
  margin-bottom: 15px;
  border: 1px solid #dddddd;
}
.replyCon .bar {
  padding: 5px 10px;
  background-color: #eeeeee;
  text-align: right;
}
.dialogHead {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  box-shadow: 0px 6px 6px 0px rgba(122,133,155,0.2);
  z-index: 1;
  background: #ffffff;
  font-size: 15px;
  font-weight: bolder;
  color: #000000;
  padding: 0 15px;
  display: flex;
  align-items: center;
}
.audited .el-dialog__header {
  margin-top: 40px;
}
.tableTitle {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
}
.tableWork {
  margin-left: auto;
  display: flex;
  height: 100%;
  align-items: center;
}
.workflow_button {
  margin-top: 4px;
  margin-left: 2px;
  padding: 0 10px;
  display: inline-block;
  border: 1px solid #dfdfdf;
  background: #ffffff;
  border-radius: 20px;
  vertical-align: top;
  cursor: pointer;
  font-size: 12px;
  font-weight: normal;
  height: 26px;
  text-align: center;
  box-sizing: border-box;
  color: #666;
  margin-left: 5px;
  display: flex;
  align-items: center;
}
.workflow_button:hover {
  border-color: #1F85EC;
}
.workbtn {
  position: relative;
}
.workBox {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 1;
  background-color: #ffffff;
}
.workbtn:hover .workBox{
  display: block;

}
.workBox .arrow1 {
  z-index: 1;
  position: absolute;
  right: 52px;
  top: -19px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid #E2EAF1;
}
.workBox .arrow2 {
  z-index: 2;
  position: absolute;
  right: 52px;
  top: -17px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid #ffffff;
}
.workBox .item_content {
  flex: 1 1;
  position: relative;
  background-color: #fff;
  padding: 10px 20px;
  width: 720px;
  box-sizing: border-box;
  padding: 14px 5px;
  min-height: 82px;
  max-height: 488px;
  border-radius: 10px;
  overflow-x: visible;
  overflow-y: visible;
  border: 1px solid #E4E7ED;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
  font-weight: normal;
}
.baogaoHead {
  padding-bottom: 10px;
  margin-top: -20px;
}
.baogaoTitle {
  padding-bottom: 10px;
  font-size: 16px;
  text-align: center;
}
.baogaoTitle span {
  font-size: 12px;
}
</style>
